<template>
  <div class="page-box">
    <div class="top-part">
      <span>{{ currentTime }}</span>
      <h3>中国电信集团财务机器人数据驾驶舱</h3>
      <span>
        区域：
      <el-select 
        size="small"
        v-model="region" 
        placeholder="请选择区域"
        :popper-append-to-body="false"
      >
        <el-option label="中国" value="中国"></el-option>
        <el-option label="江苏" value="江苏"></el-option>
      </el-select>
      </span>
    </div>
    <div class="middle-part">
      <div class="left-part">
        <leftColumn></leftColumn>
      </div>
      <div class="center-part">
        <centerColumn
          @handleOpenRobotDealNum="handleOpenRobotDealNum"
        ></centerColumn>

        <!-- <mapGeo></mapGeo>
        <linebarChart
          @handleOpenRobotDealNum="handleOpenRobotDealNum"
        ></linebarChart> -->
      </div>
      <div class="right-part">
        <rightColumn
        ></rightColumn>
      </div>
    </div>

    <!-- 下钻弹窗 -->
    <!-- 退单量 -->
    <ChargeBack ref="chargeBack"></ChargeBack>
    <!-- 高频转办 -->
    <HighFrequencyTransfer ref="highFrequencyTransfer"></HighFrequencyTransfer>
    <!-- 处理时效下钻 -->
    <ProcessingEfficiency ref="ProcessingEfficiency"></ProcessingEfficiency>
    <!-- 未处理订单量下钻 -->
    <UnDealNum ref="unDealNum"></UnDealNum>
    <!-- 预警信息下钻 -->
    <WarningInfoDetail ref="WarningInfoDetail"></WarningInfoDetail>
    <!-- 机器人处理单量下钻 -->
    <RobotDealNum ref="robotDealNum"></RobotDealNum>
    <!-- 机器人在线下钻 -->
    <RobotOnline ref="robotOnline"></RobotOnline>
  </div>
</template>

<script>
import leftColumn from './leftColumn.vue';
import rightColumn from './rightColumn.vue';
import centerColumn from './centerColumn.vue';



import lineChart from './components/lineChart.vue';
import highTransfer from './components/highTransfer.vue';
import linebarChart from './components/linebarChart.vue';
import horizontalBarchart from './components/horizontalBarchart.vue';
import warningInfo from './components/warningInfo.vue';

import roseChart from './components/roseChart.vue';
import mapGeo from './components/mapGeo.vue';
import { computedSize } from "./components/computedSize";
import ChargeBack from './detailPages/chargeBack.vue';
import HighFrequencyTransfer from './detailPages/highFrequencyTransfer.vue';
import ProcessingEfficiency from './detailPages/processingEfficiency.vue';
import UnDealNum from './detailPages/unDealNum.vue';
import WarningInfoDetail from './detailPages/WarningInfoDetail.vue';
import RobotDealNum from './detailPages/robotDealNum.vue';
import RobotOnline from './detailPages/robotOnline.vue';
import CustomTable from './components/CustomTable.vue';

export default {
  components: {
    leftColumn,
    rightColumn,
    centerColumn,

    lineChart,
    highTransfer,
    linebarChart,
    horizontalBarchart,
    warningInfo,
    roseChart,
    mapGeo,
    CustomTable,
    ChargeBack,
    HighFrequencyTransfer,
    ProcessingEfficiency,
    UnDealNum,
    WarningInfoDetail,
    RobotDealNum,
    RobotOnline,
  },
  data() {
    return {
      visible: true,
      currentTime: '',
      fontSize: 12,
      symbolSize: 5,
      borderWidth: 1,
      itemWidth: 12,
      itemHeight: 5,
      padding: 0,
      grid: {
        top: "18%",
        left: "2%",
        right: "2%",
        bottom: "6%",
        containLabel: true,
      },
      tableData: [{title: '111'}],
      region: '中国',
    }
  },
  mounted() {
    // this.computedData();
    window.addEventListener('resize', this.computedData);
    setInterval(() => {
      this.currentTime = this.$moment().format('YYYY-MM-DD HH:mm:ss');
    }, 1000);
  },
  methods: {
    updateTime() {
      setInterval(() => {
        this.currentTime = this.$moment().format('YYYY-MM-DD HH:mm:ss');
      }, 1000);
    },
    computedData() {
      const { fontSize, symbolSize, borderWidth, itemWidth, itemHeight, padding, grid } = computedSize();
      this.fontSize = fontSize;
      this.symbolSize = symbolSize;
      this.borderWidth = borderWidth;
      this.itemWidth = itemWidth;
      this.itemHeight = itemHeight;
      this.padding = padding;
      this.grid = grid;
    },
    
    // 预警信息下钻
    handleRowClick(row) {
      this.$refs.WarningInfoDetail.handleOpen();
    },
    // 机器人处理单量下钻
    handleOpenRobotDealNum(params) {
      this.$refs.robotDealNum.handleOpen();
    },
    // 机器人在线下钻
    handleOpenRobotOnline(params) {
      this.$refs.robotOnline.handleOpen();
    },


  }
}
</script>


<style lang="scss" scoped>
  .page-box {
    width: 100%;
    height: 100%;
    padding: 5px;
    background: #00264E;
    .top-part {
      height: 10%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .middle-part {
      width: 100%;
      height: 90%;
      display: flex;
      justify-content: space-between;
    }
    .title-box {
      width: 100%;
      height: 30px;
      border-left: 4px solid #007AFF;
      padding: 5px 0 5px 10px;
      background: #00264E;
    }
    span {
      color: #fff;

    }
    .left-part, .right-part {
      width: 30%;
      height: 90%;
      border: 1px solid #ccc;
    }
    .left-top {
      height: 20%;
      display: flex;
      flex-direction: column;
      .content-box {
        height: calc(100% - 50px);
        margin: 10px 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-content {
          width: calc(50% - 10px);
          height: 100%;
          border: 1px solid #007AFF;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
        }
      }
    }
    .left-bottom {
      height: calc(80% - 65px);
      margin: 10px 0;
    }
    .center-part {
      width: 40%;
      height: 90%;
    }
  }

  .top-part {
    span, h3 {
      color: #24E9EA;
    }
    ::v-deep .el-input--small .el-input__inner {
      height: 30px;
      background: transparent;
      border: 1px solid #ccc;
      color: #24E9EA;
    }
  }

// 设置下拉框的背景颜色及边框属性；
::v-deep .el-select-dropdown {
  // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
  // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示；
  background-color: transparent;
  // border: 1px solid blue;
}

// 设置下拉框的字体属性及背景颜色；
::v-deep .el-select-dropdown__item {
  background-color: transparent;
  color: #fff; // 设置下拉选项字体颜色
} 

// 设置下拉框列表的 padding 值为：0；(即：样式调整)
::v-deep .el-select-dropdown__list {
  padding: 0;
}

// 设置输入框与下拉框的距离为：0; (即：样式调整)
::v-deep .el-popper[x-placement^="bottom"] {
  margin-top: 0px;
}

// 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
::v-deep .el-popper .popper__arrow,
::v-deep .el-popper .popper__arrow::after {
  display: none;
}

// 设置鼠标悬停在下拉框列表的悬停色；
.el-select-dropdown__item:hover {
  background-color: rgba(0, 225, 219, 0.690196078431373);
}

.el-select-dropdown__item.selected {
  color: #24E9EA;
}
.el-button {
  color: #24E9EA;
  border: 1px solid #ccc;
  background: transparent;
  padding: 5px 5px;
}


// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {}
// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {}
// 2K
@media screen and (max-width: 2560px) {}
// 全高清屏幕
@media screen and (max-width: 1920px) {}
// 14寸笔记本
@media screen and (max-width: 1366px) {}
</style>
